<template>
  <div class="classify"> 
    <!-- 头部 -->
    <header>
           <img src="@/assets/img-index/扫码.png" alt="" class="header-img">
          <p class="header-p">
            <img src="@/assets/img-index/搜索.png" alt="">
             <input type="text" placeholder="复制淘宝商品名称，搜优惠返利">
          </p>
         
          <img src="@/assets/img-index/消息.png" alt="" class="header-img">
    </header>
    <!-- 中部 -->
     <main>
      <el-tabs :tab-position="tabPosition" class="category-tabs">
        <el-tab-pane label="热门推荐">
           <img src="@/assets/img-classify/Banner .png"  alt="">
           <div class="main-div1">
               <p>
                  <img src="@/assets/img-classify/休闲鞋.png"  alt="">
                  <span>休闲鞋</span>
               </p>
                <p>
                   <img src="@/assets/img-classify/裙子.png"  alt="">
                  <span>裙子</span>
               </p>
              <p>
                 <img src="@/assets/img-classify/T恤.png"  alt="">
                 <span>T恤</span>
              </p>
              <p>
                  <img src="@/assets/img-classify/水杯.png"  alt="">
                  <span>水杯</span>
              </p>
              <p>
                 <img src="@/assets/img-classify/红酒.png"  alt="" class="img-5">
                 <span>红酒</span>
              </p>
              <p>
                  <img src="@/assets/img-classify/口罩.png"  alt="">
                  <span>口罩</span>
              </p>
             
           </div>
           <!-- 特色频道 -->
           <div class="main-div2">
                <h4>特色频道</h4>
                <aside>
                    <p>
                  <img src="@/assets/img-classify/剃须刀.png"  alt="">
                  <span>9.9元封顶</span>
               </p>
               <p>
                  <img src="@/assets/img-classify/手表.png"  alt="">
                  <span>好卖点拍卖</span>
               </p>
               <p>
                  <img src="@/assets/img-classify/耳机.png"  alt="">
                  <span>好卖点国际</span>
               </p>
                </aside>
           </div>
           <!-- 特色推荐 -->
            <div class="main-div2">
                <h4>特色推荐</h4>
                <aside>
                    <p>
                  <img src="@/assets/img-classify/米糊.png"  alt="">
                  <span>米糊</span>
               </p>
               <p>
                  <img src="@/assets/img-classify/磨牙饼干.png"  alt="">
                  <span>磨牙饼干</span>
               </p>
               <p>
                  <img src="@/assets/img-classify/蝴蝶面.png"  alt="">
                  <span>蝴蝶面</span>
               </p>
                </aside>
           </div>
        </el-tab-pane>
           <!-- 左侧 -->
           <el-tab-pane label="优淘超市">优淘超市</el-tab-pane>
            <el-tab-pane label="国际品牌">国际品牌</el-tab-pane>
            <el-tab-pane label="护肤品">护肤品</el-tab-pane>
            <el-tab-pane label="电子专场">电子专场</el-tab-pane>
            <el-tab-pane label="服饰鞋包">服饰鞋包</el-tab-pane>
            <el-tab-pane label="食品保健">食品保健</el-tab-pane>
            <el-tab-pane label="家具厨具">家具厨具</el-tab-pane>
            <el-tab-pane label="玩具书籍">玩具书籍</el-tab-pane>
            <el-tab-pane label="母婴专场">母婴专场</el-tab-pane>
      </el-tabs>
    </main>
    <!-- 底部 -->
    <footer>
       <ul>
          <li @click="li1"><img src="@/assets/img-classify/首页.png" alt=""></li>
          <li ><img src="@/assets/img-classify/分类.png" alt=""></li>
          <li @click="li3"><img src="@/assets/img-index/发现.png" alt=""></li>
          <li ><img src="@/assets/img-index/购物车.png" alt="" class="img4"></li>
          <li><img src="@/assets/img-index/我的.png" alt=""></li>
         </ul>
    </footer>
  </div>
</template>

<script setup> 
import { ref } from 'vue';
import { useRouter } from 'vue-router'

const router = useRouter()
const tabPosition = ref('left');
// 跳转
const li1 = ()=>{
  router.push({ name: 'HomeIndex' })
}
const li3 = ()=>{
  router.push({ name: 'HomeFine' })
}

</script>

<style >
.classify {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}
.classify header{
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 2rem 0 0.5rem 0;
 background-color: #e62d51;
}
.classify .header-img{
  width: 1.5rem;
  height: 1.5rem;
}
.classify .header-p{
  background-color: white;
  width: 15rem;
  border-radius: 1rem;
  line-height: 2rem;
}
.classify .header-p img{
  width: 1rem;
  margin-left: 0.7rem;
  height: 1rem;
}
.classify .header-p input{
  border: none;
  margin-left: 0.5rem;
  width: 12rem;
  line-height: 2rem;
  outline:none;
}
.classify .header-p ::-webkit-input-placeholder {
color: #909090;
font-style: italic;
font-size: 0.7rem;
}
/* 中部 */
main {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.category-tabs {
  width: 100%;
  height: 100%;
  display: flex;
}

/* 深度选择器修改Element UI内部样式 */
:deep(.el-tabs__header) {
  margin-right: 0;
  height: 100%;
}

:deep(.el-tabs__nav-wrap) {
  height: 100%;
  overflow-y: auto;
  padding-bottom: 20px; /* 确保底部内容可见 */
}

:deep(.el-tabs__nav-scroll) {
  height: 100%;
  display: block;
}

:deep(.el-tabs__nav) {
  display: block !important;
  width: 100px;
}

:deep(.el-tabs__item) {
  text-align: center;
  padding: 12px 5px !important;
  height: auto !important;
  line-height: 1.4;
  font-size: 14px;
}

:deep(.el-tabs__content) {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
  height: 100%;
}

.tab-content {
  min-height: 100%;
}

/* 隐藏滚动按钮 */
:deep(.el-tabs__nav-prev),
:deep(.el-tabs__nav-next) {
  display: none !important;
}

/* 激活标签样式 */
:deep(.el-tabs__active-bar) {
  background-color: #e62d51;
  width: 3px !important;
}

:deep(.el-tabs__item.is-active) {
  color: #e62d51;
  font-weight: bold;
}
.el-tabs__active-bar{
    background-color: rgb(190, 11, 11);
   width: 3px !important;
   
}
.el-tabs--left .el-tabs__active-bar.is-left, 
.el-tabs--left .el-tabs__nav-wrap.is-left:after{
    left: 0;
}
.el-tabs {
   --el-tabs-header-height: 3.3rem;
}
/* 热门推荐的内容 */
main .category-tabs img{
  width: 15rem;
  margin: 1rem;
}
main .category-tabs .main-div1{
  display: flex;
  justify-content: space-around;
   flex-wrap: wrap;
}
main .category-tabs .main-div1 p{
  display: flex;
  flex-direction: column;
  align-items: center;     
  justify-content: center;  
  width: 5rem;              
  height: 5.5rem; 
}
main .category-tabs .main-div1 p img{
  width: 3.5rem;
   height: 3rem ;
  margin: 0.5rem 0 0.2rem 0 ;
}
main .category-tabs .main-div1 p .img-5{
  width: 1rem;
}
main .category-tabs .main-div1 p span{
  display: block;
  text-align: center;
  width: 100%;             
  font-size: 0.75rem;     
  line-height: 1.4;       
  margin-top: auto;       
  margin-bottom: 0.5rem; 
  color: rgb(107, 103, 103);
}
/* 特色频道 */
main .category-tabs .main-div2 aside{
  display: flex;
  justify-content: space-between;
  padding: 0 0.8rem;
}
main .category-tabs .main-div2 p {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 4.8rem;
}
main .category-tabs .main-div2 p img{
  width: 3.5rem ;
  height: 3rem ;
   margin: 1rem 0 0.5rem 0 ;
  object-fit: contain; /* 保证图标完整显示 */
}
main .category-tabs .main-div2 p span{
  display: block;
  text-align: center;
  width: 100%;             
  font-size: 0.75rem;     
  line-height: 1.4;       
  margin-top: auto;       
  margin-bottom: 0.5rem; 
  color: rgb(107, 103, 103);
}


/* 底部 */
footer ul{
  height: 3.5rem;
  display: flex;
  justify-content: space-around;
  background: white;
  box-shadow: 0 -0.3rem 0.5rem rgba(0,0,0,0.08);
  align-items: center;
  border-top: 1px solid rgb(218, 211, 211);

}
footer ul li img{
  width: 1.7rem;
  height: 2.5rem;
    cursor: pointer;
}
footer ul li .img4{
  width: 2.5rem;
  height: 2.5rem;
}
</style>